<template>
  <div>
    <!-- 消息按钮 start -->
    <div class="title_message">
      <el-popover placement="bottom" width="600" height="400" trigger="click" @hide="fetchData()">
        <el-tabs type="border-card">
          <el-tab-pane label="未读">
            <el-scrollbar style="height: 400px; width: 100%;">
              <!-- 未阅读信息展示 end -->
              <template v-for="(item, index) in list">
                <div
                  v-if="item.messageboxStatus === 0"
                  :key="index"
                  class="comment_table"
                  @click="read(item.messageboxId)"
                >
                  <div style="padding:10px;">
                    <div style="width:200px;font-weight:bold;padding-bottom:10px">{{ item.messageboxTitle }}</div>
                    <div style="width:200px;padding-bottom:5px">{{ item.messageboxContent }}</div>
                    <div style="overflow:hidden;white-space:nowrap;width:82px;">{{ item.messageboxPostTime }}</div>
                  </div>

                  <!-- <div v-if="item.messageboxStatus === 0">未读</div>
                  <div v-if="item.messageboxStatus === 1">已读</div> -->

                </div>
              </template>
            </el-scrollbar>
          </el-tab-pane>
          <!-- 已阅读信息展示 end -->
          <el-tab-pane label="已读">
            <el-scrollbar style="height: 400px;">
              <template v-for="(item, index) in list">
                <div
                  v-if="item.messageboxStatus === 1"
                  :key="index"
                  class="comment_table"
                >
                  <div class="box" style="padding:10px;">
                    <div style="width:200px;font-weight:bold;padding-bottom:10px">{{ item.messageboxTitle }}</div>
                    <div style="padding-bottom:5px">{{ item.messageboxContent }}</div>
                    <div style="overflow:hidden;white-space:nowrap;width:82px;">{{ item.messageboxPostTime }}</div>
                  </div>
                  <!-- <div v-if="item.messageboxStatus === 0">未读</div>
                  <div v-if="item.messageboxStatus === 1">已读</div> -->
                </div>
              </template>
            </el-scrollbar>
          </el-tab-pane>
          <!-- <el-button
            style="width: 100%;height: 50px;border: 1px solid rbg(156,220,0.3);margin-top:4px;font-size: 14px;font-weight: bold;color: red;"
            @click="allRead()"
          >全部处理
          </el-button> -->
        </el-tabs>
        <!-- 新增字段信息条数:item.accountInfo -->
        <el-badge slot="reference" style="margin:20px" :value="list.accountInfo" :max="99" class>
          <!-- <img src="" alt> 消息 -->
          <el-button icon="el-icon-message" circle />
        </el-badge>
      </el-popover>
    </div>
    <!-- 消息按钮 end -->
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getMessageByUser, updateMessageStatus } from '@/api/messageBox'
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      list: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // this.fetchData()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    fetchData() {
      getMessageByUser().then((res) => {
        this.list = res.obj
        var accountInfo = 0
        const newInfo = res.obj
        // for循环创建一个字段accountInfo,判断未通知的条数
        for (var i = 0; i < newInfo.length; i++) {
          const item = newInfo[i]
          if (item.messageboxStatus === 0) {
            accountInfo = accountInfo + 1
          }
        }
        newInfo.accountInfo = accountInfo
        console.log(newInfo)
        this.list = newInfo
        console.log(this.list)
      })
    },
    read(messageboxId) {
      console.log(messageboxId)
      updateMessageStatus(messageboxId, 1).then((res) => {
        console.log('成功')
      })
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.comment_table{
  width: 100%;
  float: left;
}
.comment_table :hover{
  background-color: #ECF5FF;
  color: #66B1FF;
}

</style>
